import { Button, Form, Input, Select, Pagination, Switch, Popconfirm } from 'antd'
import { ApiLive } from '../../api'
import React, { useEffect, useState } from 'react'

import { ReactFlvPlayer } from 'react-flv-player'

const { Option } = Select


const Index = () => {
    const [data, setData] = useState([])
    // 总数据
    const [total, setTotal]: any = useState('')
    // 页码
    const [page, setPage]: any = useState({
        pages: 10,
        PageNumber: 1
    })



    useEffect(() => {
        getList()
    }, [page.PageNumber])

    // 获取数据
    const getList = () => {
        ApiLive({ ...page }).then((res: any) => {
            setData(res.data.data);
            setTotal(res.data.total)
        })
    }

    // onFinish事件
    const onFinish = () => {

    }
    // onChange事件
    const onChange = (pageNumber: any) => {
        setPage({
            ...page,
            PageNumber: pageNumber
        })

    }

    // 开关事件
    const onChangeSwitch = (event: any, item: any) => {

    }
    // 删除数据
    const delLive = (item: any) => {

    }

    return (
        <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', left: '0', top: "0", zIndex: '80' }}>
                <ReactFlvPlayer
                    url="http://localhost:8000/management/12345.flv"
                    heigh="800px"
                    width="800px"
                    isMuted={true}
                />
            </div>
            {/* 搜素事件 */}
            <div style={{ display: 'flex', marginTop: '10px' }}>

                <Form name="horizontal_login" layout="inline" onFinish={onFinish}>

                    <Form.Item name="state" label="直播状态" style={{ width: '200px' }}>
                        <Select>
                            <Option value="二手房出租">直播中</Option>
                            <Option value="有房出租">已结束</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item name="username" label="用户名">
                        <Input placeholder="请输入用户名" />
                    </Form.Item>

                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>

                </Form >
            </div >

            {/* 直播数据 */}
            <div style={{ marginTop: '10px', display: 'flex', flexWrap: 'wrap', height: '600px' }}>
                {
                    data.map((item: any, ind: any) => {
                        return (
                            <dl key={ind} style={{ margin: '10px 15px' }}>
                                <dt style={{ width: '250px', height: '155px', position: 'relative' }}>
                                    <img src={item.img} alt=""
                                        style={{ width: '100%', height: '100%' }} />
                                    {
                                        item.state == '直播中' ?
                                            <span style={{ position: 'absolute', bottom: '5px', left: '5px', background: 'rgb(74, 156, 237)', color: '#fff', padding: '2px 5px' }}>直播中</span>
                                            :
                                            <span style={{ position: 'absolute', bottom: '5px', left: '5px', background: 'rgb(130, 220, 187)', color: '#fff', padding: '2px 5px' }}>已结束</span>
                                    }
                                </dt>
                                <dd style={{ marginTop: '6px' }}>
                                    <p>{item.title}</p>
                                    <p style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <span>{item.name}</span>
                                        <span>{item.time}</span>
                                    </p>
                                    <p>
                                        {
                                            item.state == '直播中' ?
                                                <span style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                    <span style={{ color: 'rgb(74, 156, 237)', cursor: 'pointer' }}>进入直播</span>
                                                    <span>
                                                        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked onChange={(event) => onChangeSwitch(event, item)} />
                                                    </span>
                                                </span>
                                                :
                                                <span style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                    <span style={{ color: 'rgb(74, 156, 237)', cursor: 'pointer' }}>回看</span>

                                                    <Popconfirm
                                                        title="您确定要删除吗?"
                                                        onConfirm={() => delLive(item)}
                                                        // onCancel={cancel}
                                                        okText="确定"
                                                        cancelText="取消"
                                                    >
                                                        <span style={{ color: 'rgb(74, 156, 237)', cursor: 'pointer' }}>
                                                            删除
                                                        </span>
                                                    </Popconfirm>
                                                </span>
                                        }
                                    </p>
                                </dd>
                            </dl>
                        )
                    })
                }

                <div style={{ position: 'absolute', bottom: '2px', right: '50px', }}>
                    <Pagination
                        defaultCurrent={1}
                        total={total}
                        defaultPageSize={page.pages}
                        onChange={onChange}
                    />
                </div>
            </div>
        </div>
    )
}
export default Index

